<template>
  <div>
    <span
    >Welcome and look forward to our next meeting</span
    >
  </div>
</template>

<script lang="ts" setup>
import {computed, h, onMounted} from "vue";
import store from "@/store";
import {Tool} from "@/util/tool";
import {ElNotification} from "element-plus";
//监听
const user=computed(()=>store.state.user)
let websocket: any;
let token: any;
const onOpen = () => {
  console.log('WebSocket连接成功，状态码：', websocket.readyState)
};
const onMessage = (event: any) => {
  console.log('WebSocket收到消息：', event.data);
  open1("blue",event.data)
};
const onError = () => {
  console.log('WebSocket连接错误，状态码：', websocket.readyState)
};
const onClose = () => {
  console.log('WebSocket连接关闭，状态码：', websocket.readyState)
};
const initWebSocket = () => {
  // 连接成功
  websocket.onopen = onOpen;
  // 收到消息的回调
  websocket.onmessage = onMessage;
  // 连接错误
  websocket.onerror = onError;
  // 连接关闭的回调
  websocket.onclose = onClose;
};
onMounted(() => {
  // WebSocket
  if ('WebSocket' in window) {
    token = Tool.uuid(10);
    // 连接地址：ws://127.0.0.1:8880/ws/xxx
    websocket = new WebSocket(process.env.VUE_APP_WS_PROP + '/ws/' + token);
    initWebSocket()

    // 关闭
    // websocket.close();
  } else {
    alert('当前浏览器 不支持')
  }
});
const open1 = (color:string,msg:string) => {
  ElNotification({
    title: '消息',
    message: h('i', { style: 'color: '+color }, msg),
    duration:3000,
  })
}
</script>

<style scoped>

</style>